.intelligent-discovery {
  box-sizing: border-box;
  font-family: 'SourceHanSansSC', 'DINAlternate', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  .item-wrap{
    height: calc(100% / 2);
    width: 30%;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0 10px;
    .item-title{
      font-family: 'SourceHanSansSC';
      font-size: 14px;
      margin-bottom: 10px;
    }
    .item-icon{
      width: 64px;
      height: 64px;
      background-size: cover;
      margin-bottom: -8px;
      position: relative;
      .value{
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 22px;
        font-family: 'DINAlternate';
        font-weight: bold;
        background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 3%, #81C6FF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
    }
  }
  &__item {
    box-sizing: border-box;
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 10px;

    &:hover {
      background: rgba(26, 215, 255, 0.1);
      transform: translateY(-3px);
      box-shadow: 0 6px 16px rgba(26, 215, 255, 0.3);
    }

    &:active {
      transform: translateY(-1px);
    }
  }

  &__item-title {
    box-sizing: border-box;
    transition: all 0.3s ease;

    .intelligent-discovery__item:hover & {
      color: #1AD7FF !important;
      transform: scale(1.02);
    }
  }

  &__item-icon-container {
    box-sizing: border-box;
    transition: all 0.3s ease;
    position: relative;

    .intelligent-discovery__item:hover & {
      transform: scale(1.05);
    }
  }

  &__item-icon {
    box-sizing: border-box;
    transition: all 0.3s ease;

    .intelligent-discovery__item:hover & {
      filter: brightness(1.2) drop-shadow(0 0 8px rgba(26, 215, 255, 0.5));
    }
  }

  &__item-value {
    box-sizing: border-box;
    transition: all 0.3s ease;
    animation: glow 2s ease-in-out infinite alternate;

    .intelligent-discovery__item:hover & {
      transform: scale(1.1);
      animation: pulse 0.5s ease-in-out;
    }
  }

  &__item-progress {
    box-sizing: border-box;
    transition: all 0.3s ease;
    animation: progressGlow 2s ease-in-out infinite alternate;

    .intelligent-discovery__item:hover & {
      opacity: 0.8 !important;
      transform: scale(1.1);
    }
  }

  // 数值发光动画
  @keyframes glow {
    from {
      text-shadow: 0 0 5px rgba(26, 215, 255, 0.5);
    }
    to {
      text-shadow: 0 0 10px rgba(26, 215, 255, 0.8), 0 0 15px rgba(26, 215, 255, 0.6);
    }
  }

  // 脉冲动画
  @keyframes pulse {
    0% {
      transform: scale(1.1);
    }
    50% {
      transform: scale(1.15);
    }
    100% {
      transform: scale(1.1);
    }
  }

  // 进度条发光动画
  @keyframes progressGlow {
    from {
      box-shadow: 0 0 5px rgba(22, 241, 255, 0.3);
    }
    to {
      box-shadow: 0 0 10px rgba(22, 241, 255, 0.6), 0 0 15px rgba(22, 241, 255, 0.4);
    }
  }

  // 项目进入动画
  &__item {
    animation: slideInUp 0.5s ease-out;
    animation-fill-mode: both;

    @for $i from 1 through 10 {
      &:nth-child(#{$i}) {
        animation-delay: #{$i * 0.1}s;
      }
    }
  }

  @keyframes slideInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  // 图标旋转动画
  &__item-icon {
    .intelligent-discovery__item:hover & {
      animation: iconRotate 2s ease-in-out infinite;
    }
  }

  @keyframes iconRotate {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(5deg);
    }
    75% {
      transform: rotate(-5deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }

  // 响应式设计
  @media screen and (max-width: 1920px) {
    transform: scale(0.4862); // 1920/3952 ≈ 0.4862
    transform-origin: top left;
  }

  @media screen and (max-width: 1080px) {
    transform: scale(0.2733); // 1080/3952 ≈ 0.2733
    transform-origin: top left;
  }

  @media screen and (min-width: 5120px) {
    transform: scale(1.7778); // 5120/3952 ≈ 1.2955
    transform-origin: top left;
  }

  // 网格布局优化
  &.intelligent-discovery--grid {
    .intelligent-discovery__item {
      justify-self: center;
      align-self: center;
    }
  }

  // 弹性布局优化
  &.intelligent-discovery--flex {
    .intelligent-discovery__item {
      flex: 1;
      min-width: 0;
    }
  }
}
